import { defineComponent } from "vue";
import style from "./index.module.less";
import CardView from "../CardView";
import img from "./asset/img.png";
import { IMessageCardData, messageCardProps } from "./types";
import { Swipe, SwipeItem } from "vant";
import RowView from "../RowView";
import { getSize } from "@/command/apiTool";
import TextView from "../TextView";
export default defineComponent({
  name: "",
  props: messageCardProps,
  setup(_) {
    const renderItem = (item: IMessageCardData) => {
      return (
        <div
          onClick={() => _.onClick && _.onClick(item)}
          class="text-[12px] text-[#666]"
        >
          <TextView>{item.text}</TextView>
          <div>{item.time}</div>
        </div>
      );
    };
    const renderSwipe = () => {
      return (
        <div class="flex flex-1 h-[35px]">
          <Swipe
            autoplay={3000}
            show-indicators={false}
            vertical
            lazy-render={true}
            loop
            touchable={false}
          >
            {_.data.map((e) => {
              return (
                <SwipeItem>
                  {_.renderItem ? _.renderItem(e) : renderItem(e)}
                </SwipeItem>
              );
            })}
          </Swipe>
        </div>
      );
    };
    const renderLeft = () => {
      return (
        <RowView class="w-[72px]">
          <img src={img} class="w-[34px] h-[42px]" />
          <span class="w-[1px] h-[32px] bg-[#ECECEC] ml-[9px] mr-[12px]" />
        </RowView>
      );
    };
    return () => {
      return (
        <CardView class="flex items-center" style={{ maxHeight: getSize(58) }}>
          <RowView class="justify-between w-full">
            {renderLeft()}
            {renderSwipe()}
          </RowView>
        </CardView>
      );
    };
  },
});
